<template>
    <el-card class="box-card">
        <div class="row">
            <el-icon>
                <Tickets />
            </el-icon>
            <span>数据列表</span>
            <el-button type="primary" @click="router.push(`/pms/addProductCate`)"
                v-permission="'addProductCate'">添加</el-button>
        </div>
    </el-card>
    <el-table :data="list" border table-layout="auto">
        <el-table-column prop="id" label="编号" />
        <el-table-column prop="name" label="分类名称" />
        <el-table-column label="级别">
            <template #default="{ row }">
                {{ row.parentId == 0 ? '一级' : '二级' }}
            </template>
        </el-table-column>
        <el-table-column label="商品数量" prop="productCount" />
        <el-table-column label="数量单位" prop="productUnit" />
        <el-table-column prop="sort" label="导航栏">
            <template #default="{ row }">
                <el-switch v-model="row.navStatus" :active-value="1" :inactive-value="0"
                    @click="switchNavStatus(row.id, row.navStatus)" />
            </template>
        </el-table-column>
        <el-table-column label="是否显示">
            <template #default="{ row }">
                <el-switch v-model="row.showStatus" :active-value="1" :inactive-value="0"
                    @click="switchShowStatus(row.id, row.showStatus)" />
            </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" />
        <el-table-column label="设置">
            <template #default="{ row }">
                <el-button @click="router.push(`/pms/productCate?parentId=${row.id}`)">查看下级</el-button>
                <el-button>转移商品</el-button>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="{ row }">
                <el-button @click="router.push(`/pms/updateProductCate?id=${row.id}`)"
                    v-permission="'updateProductCate'">编辑</el-button>
                <el-button type="danger" @click="del(row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-config-provider :locale="zhCn">
        <div class="page">
            <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
                background layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="pageChangeHandle" @current-change="pageSizeChangeHandle" />
        </div>
    </el-config-provider>
</template>
<script setup lang='ts'>
import useTable from "@/hooks/useTable";
import { reactive, ref, watch } from "vue";
import { ApiDeleteProductCategory, ApiGetProductCategoryList, ApiNavStatus, ApiShowStatus } from "./api";
import { ElConfigProvider, ElMessage } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { Tickets } from '@element-plus/icons-vue'
import { useRoute, useRouter } from "vue-router";
const router = useRouter()
const route = useRoute()
const del = (id: number) => {
    ApiDeleteProductCategory(id).then(res => {
        if (res.code == 200) {
            ElMessage.success("删除成功")
            searchHandle()
        } else {
            ElMessage.error("删除失败")
        }
    })
}
const ids = ref<number[]>([])//id数组
// 分类导航栏显示
const switchNavStatus = (id: number, status: number) => {
    ids.value = [id]
    ApiNavStatus(ids.value, status).then(res => {
        if (res.code == 200) {
            ElMessage.success("修改成功");
        } else {
            ElMessage.success("修改失败");
            searchHandle()
        }
        ids.value = []
    })
}
// 分类显示
const switchShowStatus = (id: number, status: number) => {
    ids.value = [id]
    ApiShowStatus(ids.value, status).then(res => {
        if (res.code == 200) {
            ElMessage.success("修改成功");
        } else {
            ElMessage.success("修改失败");
            searchHandle()
        }
        ids.value = []
    })
}
const from = reactive({
    parentId: 0
})
watch(() => route.query.parentId, () => {
    if (parseInt(route.query.parentId as string) > 0) {
        from.parentId = parseInt(route.query.parentId as string)
        searchHandle()
    } else {
        from.parentId = 0
        searchHandle()
    }
})
const {
    list,
    pageNum,
    pageSize,
    total,
    pageChangeHandle,
    pageSizeChangeHandle,
    searchHandle,
} = useTable(ApiGetProductCategoryList, from);
</script>
<style lang="less" scoped>
:deep(.el-table__inner-wrapper) {
    font-size: 12px;
}

:deep(.el-table__cell) {
    text-align: center;
}

.box-card {
    margin-bottom: 20px;

    .row {
        display: flex;
        align-items: center;

        span {
            flex: 1;
        }

    }

    :deep(.el-form) {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
    }

}

.page {
    padding: 20px;

    :deep(.el-pagination) {
        justify-content: flex-end;
    }
}
</style>